@charset "UTF-8";
//px转rem 以及倍数
@function px-rem($px,$n:1){
  @return 10/1920*$px*$n+rem;
}
body{
  -ms-overflow-style:scrollbar;
}


*{
  box-sizing: border-box;
}
.section{
  background-position:center center;
  background-size: cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
  overflow: hidden;
}
.logo_wrap{
  position: fixed;
  top:0;
  left: 0;
  width: 100%;
  z-index: 100;
  height: 0px;
  >.logo{
    margin-left:25px;
    margin-top:25px;
    float:left;
    width:200px;
  }
  @media screen and (max-width:1024px) {
    >.logo{
      margin-left:30px;
      margin-top:30px;
      float:left;
      width:150px;
    }
  }
  @media screen and (max-width:500px) {
    >.logo{
      margin-left:15px;
      margin-top:15px;
      float:left;
      width:100px;
      >img{
        width: 100%;
      }
    }
  }
  >.btn{
    cursor: pointer;
    &:hover{
      >span:first-child{
        width: 40px;
      }
      >span:first-child+span{
        width: 30px;
      }
      >span:last-child{
        width: 40px;
      }
    }
    position: absolute;
    right: 40px;
    top:40px;
    width: 40px;
    height:40px;
    >span:first-child{
      margin: 0 auto;
      margin-top: 8px;
      background: #FFF;
      display: block;
      width: 30px;
      height: 3px;
      border-radius: 2px;
      margin-bottom: 8px;
      opacity: 0.9;
      transition: all .2s;
    }
    >span:first-child+span{
      margin: 0 auto;
      background: #FFF;
      display: block;
      width: 40px;
      height: 3px;
      border-radius: 2px;
      margin-bottom: 8px;
      opacity: 0.9;
      transition: all .2s;
    }
    >span:last-child{
      margin: 0 auto;
      background: #FFF;
      display: block;
      width: 30px;
      height: 3px;
      border-radius: 2px;
      margin-bottom: 0px;
      opacity: 0.9;
      transition: all .2s;
    }
  }
  @media screen and (max-width:500px ){
    >.btn{
      position: absolute;
      right: 20px;
      top:17px;
      width: 28px;
      height:28px;
      &:hover{
        >span:first-child{
          width: 28px;
        }
        >span:first-child+span{
          width: 21px;
        }
        >span:last-child{
          width: 28px;
        }
      }
      >span:first-child{
        margin: 0 auto;
        margin-top: 8px;
        background: #FFF;
        display: block;
        width: 21px;
        height: 3px;
        border-radius: 2px;
        margin-bottom: 6px;
        opacity: 0.9;
        transition: all .2s;
      }
      >span:first-child+span{
        margin: 0 auto;
        background: #FFF;
        display: block;
        width: 28px;
        height: 3px;
        border-radius: 2px;
        margin-bottom: 6px;
        opacity: 0.9;
        transition: all .2s;
      }
      >span:last-child{
        margin: 0 auto;
        background: #FFF;
        display: block;
        width: 21px;
        height: 3px;
        border-radius: 2px;
        margin-bottom: 0px;
        opacity: 0.9;
        transition: all .2s;
      }
    }
  }
  >.sidebar{
    display: none;
    box-sizing: border-box;
    position: fixed;
    top:0;
    right: -100%;
    width:400px;
    height:100%;
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
    >.sidewrap{
      position: relative;
      margin: 0px auto;
      height: 100%;
      width: 60%;
      >.side_close{
        position: absolute;
        right: 0px;
        top: 29px;
      }
      >.side_logo{
          padding-top: 7vh;
        padding-bottom: 3vh;
          width: 70%;
        >img{
          width: 100%;
        }
      }
      >.nav{
        margin-bottom: 2vh;
        >li{
          line-height: 5vh;
          height: 5vh;
         >a{
           font-size: 14px;
           color: #FFF;
           opacity:0.65;
           &:hover{
             opacity:1;
           }
         }
        }
      }
      >.copy{
        font-size: 14px;
        color:#fff;
        opacity: 0.6;
        line-height: 3vh;
      }
      @media screen and (max-height:530px ){
        >.copy{
          line-height: 4vh;
          margin-top: 3vh;
        }
      }
      >.scan{
        width: 60%;
        padding-top: 3vh;
        >img{
          width: 100%;
        }
      }
      @media screen and (max-height:621px ){
        >.scan{
          width: 50%;
        }
      }
      @media screen and (max-height:530px ){
        >.scan{
          display: none;
        }
      }
    }
  }
  @media screen and (max-width:768px ){
    >.sidebar{
      width: 320px;
    }
  }

}
//第一屏
.banner{

  .content {
    width: 100%;
    height:100%;
    > .video {
      height: 300px;
      position: absolute;
      width: 100%;
      overflow: hidden;
      background-color:rgba(0, 0, 0, 0.8);
      > div {
        width: 100%;
        > video {
          width: 100%;
          display: block;
          margin: 0px auto;
        }
      }
      > .video_mask {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8) url("../images/20170704191245_177.png") no-repeat center;
        background-size: cover;
        z-index: 10;
        opacity: 0.6;

      }
      > div.play {
        cursor: pointer;
        background-image: url("../images/play_03.svg");
        width: 120px;
        height: 120px;
        position: absolute;
        display: block;
        left: 50%;
        top: 50%;
        margin-top: -60px;
        margin-left: -60px;
        z-index: 101;
        opacity: 0.5;
        &:hover{
          opacity: 0.8;
        }
      }
      @media screen and (max-width: 500px) {
        > div.play {
          background-image: url("../images/play_03.svg");
          width: 60px;
          height: 60px;
          position: absolute;
          background-size: cover;
          left: 50%;
          top: 50%;
          margin-top: -30px;
          margin-left: -30px;
        }
      }
      > .close {
        cursor: pointer;
        width: 40px;
        height: 40px;
        background-image: url("../images/close.svg");
        background-size: cover;
        position: absolute;
        right: 40px;
        top: 30px;
        z-index: 10;
      }
      @media screen and (max-width:768px) {
        > .close {
          right: 2%;
          top: 15px;
        }

      }
      @media screen and (max-width: 500px) {
        > .close {
          width: 28px;
          height: 28px;
          right: 2%;
          top: 15px;
        }

      }
    }
    >.wrap{
      width: 100%;
      height:100%;
      position: absolute;
      left:0;
      top:0;
      >.b-news{
        position: absolute;
        bottom:5%;
        left: 50%;
        margin-left: -250px;
        width:500px;
        >.bd{
           ul{
            font-size: 18px;
             li{
               a{
                 display: block;
                 color:#fff;
                 font-weight: bold;
                 line-height: 30px;
                 letter-spacing: 1px;
                 word-break: keep-all;
                 @include text-ellipsis-line();
                 &:hover{
                   color:#bd2429;
                 }
               }
               @media screen and (max-width:600px) {
                 font-size: 14px;
               }
             }


          }
        }
        >span{
          display: block;
          float: left;
          width: 52px;
          height: 26px;
          background: url(../images/laba.svg) no-repeat left center;
          margin: 2px 5px 0 0;
          position: relative;
          >i{
            font-style: normal;
            width: 1px;
            position: absolute;
            background: #FFF;
            opacity: 0;
          }
          >.i1{
            height: 6px;
            top: 10px;
            left: 32px;
            -webkit-animation: b_i1 2.5s linear infinite;
            -moz-animation: b_i1 2.5s linear infinite;
            -ms-animation: b_i1 2.5s linear infinite;
            animation: b_i1 2.5s linear infinite;
          }
          >.i2{
            height: 10px;
            top: 8px;
            left: 36px;
            -webkit-animation: b_i2 2.5s linear infinite;
            -moz-animation: b_i2 2.5s linear infinite;
            -ms-animation: b_i2 2.5s linear infinite;
            animation: b_i2 2.5s linear infinite;
          }
          >.i3{
            height: 16px;
            top: 5px;
            left: 41px;
            -webkit-animation: b_i3 2.5s linear infinite;
            -moz-animation: b_i3 2.5s linear infinite;
            -ms-animation: b_i3 2.5s linear infinite;
            animation: b_i3 2.5s linear infinite;
          }
        }
      }
      @media screen and (max-width:600px ){
        >.b-news{
          margin-left: -150px;
          width:300px;
        }
      }
      .text1_wrap{
        width: 90%;
        height: 140px;
        position: absolute;
        top: 56%;
        left: 5%;
        margin-top: -70px;
        background-size: 100% 100%;
        cursor: pointer;
        >p:nth-child(1){
          font-size: 44px;
          text-align: center;
          margin-bottom: 35px;
          font-weight: 100;
          color: #fff;
          letter-spacing: 9px;
          &:hover{
            color: #eee;
          }
          @media screen and(max-width: 1020px){
            font-size: 33px;
          }
          @media screen and(max-width: 530px){
            font-size: 22px;
            margin-bottom: 22px;
            letter-spacing: 4px;
          }
        }
        >p:nth-child(2){
          font-size: 17px;
          font-weight: 100;
          color: #fff;
          letter-spacing: 3px;
          text-align: center;
          &:hover{
            color: #eee;
          }
          @media screen and(max-width: 1020px){
            font-size: 13px;
          }
          @media screen and(max-width: 530px){
            font-size: 12px;
            line-height: 20px;
          }
          >span{
            color: #1e96d2;
          }
        }
      }
    }
  }
}
//第一屏


//第二屏
.section1{

  .sect1_nav_wrap{
  position: relative;
  width:70%;
  margin-top:100px;
  margin-left:24%;
  @media screen and (max-width: 768px){
    width:10rem;
    margin-left:0px;
    margin-top:0px;
  }
}
  .sect1_nav_mask{
    border-radius: 0.04rem;
    position: absolute;
    left: 0.22rem;
    top: 80px;
    width: 98%;
    height: 90%;
    background: rgba(100,100,100,0.28);
    z-index: 1;
    @media screen and(max-width: 1020px) {
      left: 0.18rem;
      top: 0.85rem;
    }
    @media screen and(max-width: 768px) {
      left: 0.18rem;
      top: 1.47rem;
    }
  }

  .sect1_nav{
    border-radius: 0.04rem;
    position: relative;
    z-index: 2;
    background-color:rgba(100,100,100,0.4);
    overflow: hidden;
    >ul{
      width: 70%;
      margin-left: 0.23rem;
      overflow: hidden;
     display: inline-block;
      font-size: 0;
      >a{
        width: 33.33%;
      display: inline-block;
        padding: 0.04rem;
        cursor: pointer;
      }
    }
    >div{
      width: 26%;
      display: inline-block;
      vertical-align: top;
      >p:nth-child(1){
        margin-top:65%;
        color: #1f95d5;
        font-size:25px;
        letter-spacing: 1px;
        text-align: center;
      }
      >p:nth-child(2){
        margin-top:10%;
        margin-bottom: 10%;
        color: #fff;
        font-size:15px;
      text-align: center;
        >span{
          margin-right: 0.093rem;
        }
      }
      >a{
        >b{
          display: block;
          margin: 0 auto;
          width: 144px;
          font-size:17px;
          height: 50px;
          background-color: #1e96d5;
          border-radius:5px;
          text-align: center;
          line-height: 50px;
          color: #fff;
          cursor: pointer;
          &:hover{
            background-color: #1E96BD;
          }
        }
      }

    }
  }
  @media screen and(max-width:1020px){
    .sect1_nav{
      border-radius: 0.04rem;
      position: relative;
      width:6.947rem;
      z-index: 2;
      background-color:rgba(100,100,100,0.4);
      overflow: hidden;
      >ul{
        width: 96.5%;
        margin-left: 0.23rem;
        overflow: hidden;
        float: left;
      }
      >div{
        width: 100%;
        float: left;
        height: 1.65rem;
        >p:nth-child(1){
          margin-top: 0.233rem;
          color: #1f95d5;
          font-size: 0.28rem;
          letter-spacing: 1px;
          text-align: center;
        }
        >p:nth-child(2){
          text-align: center;
          margin-top: 0.156rem;
          margin-bottom: 0.197rem;
          color: #797572;
          font-size: 0.195rem;
          padding-left: 0.203rem;
          >span{
            margin-right: 0.093rem;
          }
        }
        >a{
          >b{
              display: block;
              margin: 0 auto;
              width: 1.2rem;
              font-size: 0.114rem;
              height: 0.4rem;
              background-color: #1e96d5;
              border-radius: 0.05rem;
              text-align: center;
              line-height: 0.4rem;
              color: #fff;
            cursor: pointer;
            &:hover{
              background-color: #1E96BD;
            }
          }
        }
      }
    }
  }
  @media screen and(max-width:768px){
    .sect1_nav{
      border-radius: 0.04rem;
      position: relative;
      width:10rem;
      z-index: 2;
      background-color:rgba(100,100,100,0.4);
      overflow: hidden;
      >ul{
        width: 96.5%;
        margin-left: 0.23rem;
        overflow: hidden;
        float: left;
      }
      >div{
        width: 100%;
        float: left;
        height: 2.35rem;
        >p:nth-child(1){
          margin-top: 0.233rem;
          color: #1f95d5;
          font-size: 0.28rem;
          letter-spacing: 1px;
          text-align: center;
        }
        >p:nth-child(2){
          text-align: center;
          margin-top: 0.156rem;
          margin-bottom: 0.197rem;
          color: #fff;
          font-size: 0.195rem;
          padding-left: 0.203rem;
          >span{
            margin-right: 0.093rem;
          }
        }
        >a{
          >b{
            display: block;
            margin: 0px auto;
            width: 2.6rem;
            font-size: 0.21rem;
            height: 0.76rem;
            background-color: #1e96d5;
            border-radius: 0.1rem;
            text-align: center;
            line-height: 0.75rem;
            color: #fff;
            cursor: pointer;
            &:hover{
              background-color: #1E96BD;
            }
          }
        }
      }
    }
  }
  .sect1_nav_item{
    &:hover{
      >.sect1_nav_item_c{
        position: relative;
        padding-bottom: 139%;
        height:auto;
        >img{
          position: absolute;
         transform: scale(1.1);
        }
      }
    }
    >.sect1_nav_item_h{
      overflow: hidden;
      padding-top:15px;
      >img{
        display: inline-block;
        width:50px;
        height: 50px;
        vertical-align: top;
      }
      >div{
        display: inline-block;
        margin-left:12px;
        >p:nth-child(1){
          font-size: 18px;
          letter-spacing: 1px;
          margin-bottom: 5px;
          color: #fff;
          font-weight:100;
        }
        >p:nth-child(2){
          font-size: 14px;
          letter-spacing: 1px;
          margin-bottom: 3px;
          color: #fff;
          font-weight:100;
        }
        >p:nth-child(3){
          font-size:13px;
          color: #7dabc5;
          font-weight:100;
          margin-bottom: 10px;
        }
      }
    }
    >.sect1_nav_item_c{
      position: relative;
      padding-bottom: 139%;
      height:auto;
      overflow: hidden;
      border-radius: 6px;
      >img{
        position: absolute;
        width: 100%;
        height:100%;
        transition:all 500ms;
      }
    }
  }
  @media screen and(max-width:1020px){
    .sect1_nav_item{
      >.sect1_nav_item_h{
        height: 0.9rem;
        overflow: hidden;
        padding-top: 0.17rem;
        >img{
          float: left;
          width: 0.51rem;
          height: 0.51rem;
        }
        >div{
          float: left;
          margin-left: 0.062rem;
          >p:nth-child(1){
            font-size: 0.185rem;
            letter-spacing: 1px;
            margin-bottom: 0.03rem;
            color: #fff;
            font-weight: 500;
          }
          >p:nth-child(2){
            font-size: 0.145rem;
            letter-spacing: 1px;
            margin-bottom: 0.03rem;
            color: #fff;
            font-weight: 100;
          }
          >p:nth-child(3){
            font-size: 0.145rem;
            color: #7dabc5;
            font-weight: 100;
          }
        }
      }
    }
  }
  @media screen and(max-width:768px){
    .sect1_nav_item{
      >.sect1_nav_item_h{
        height: 1.51rem;
        min-height: 44px;
        overflow: hidden;
        padding-top: 0.17rem;
        >img{
          float: left;
          width: 0.71rem;
          height: 0.71rem;
        }
        >div{
          float: left;
          margin-left: 0.1rem;
          >p:nth-child(1){
            font-size: 0.27rem;
            letter-spacing: 1px;
            margin-bottom: 0.1rem;
            color: #fff;
            font-weight: 500;
          }
          >p:nth-child(2){
            font-size: 0.22rem;
            letter-spacing: 1px;
            margin-bottom: 0.1rem;
            color: #fff;
            font-weight: 100;
          }
          >p:nth-child(3){
            font-size: 0.22rem;
            color: #7dabc5;
            font-weight: 100;
          }
        }
      }
    }
  }
}
//第二屏

//第三屏
.section2{

  .se2_wrap{
    margin-left:1.56rem;
    width:8rem;
    height: 2.09rem;
    @media screen and(max-width: 1020px){
      margin: 0px auto;
      height:auto;
    }
  }
  .se2_text{
    width: 3.796rem;
    float: left;
    padding-top: 1px;
    >p:nth-child(1){
      margin-top: 0.197rem;
      font-size:0.197rem;
      letter-spacing: 2px;
      color: #fff;
      font-weight: 100;
    }
    >a{
      >p{
        margin-top: 0.161rem;
        margin-left: 0.416rem;
        font-size: 0.151rem;
        line-height: 0.151rem;
        letter-spacing: 1px;
        font-weight: 100;
        vertical-align: middle;
        >span:nth-child(1){
          margin-right: 0.104rem;
          color: #fff;
        }
        >span:nth-child(2){
          color: #1f8bcb;
        }
        >span:nth-child(3){
          position: relative;
          width: 60px;
          display: inline-block;
          overflow: hidden;
          color: #1e94d4;
          height: 20px;
          vertical-align: top;
        }
      }
    }

    >p:nth-child(3){
      margin-top: 0.239rem;
      font-size: 0.093rem;
      color: #fff;
      letter-spacing: 0.02rem;
      line-height: 0.177rem;
    }
  }
  @media screen and (max-width: 1020px){
    .se2_text{
      width: 100%;
      padding-top: 1px;
      >p:nth-child(1){
        margin-top: 0.197rem;
        width: 100%;
        font-size: 0.5rem;
        text-align: center;
        letter-spacing: 2px;
        color: #fff;
        font-weight: 100;
        margin-bottom: 0.4rem;
      }
      >a{
        >p{
          font-size: 0.351rem;
          line-height: 0.351rem;
          >span:nth-child(1){
            margin-right: 0.104rem;
            color: #fff;
          }
          >span:nth-child(2){
            color: #1f8bcb;
          }
        }
      }

      >p:nth-child(3){
        display: none;
        margin-top: 0.239rem;
        font-size: 0.093rem;
        color: #fff;
        letter-spacing: 0.02rem;
        line-height: 0.177rem;
      }
    }
  }
  .se2_picture{
    float: right;
    width: 3.484rem;
    >.se2_left_wrap{
      float: left;
      width:54%;
      >div:nth-child(1){
        margin-left: 0.661rem;
        height: 0.838rem;
        padding: 0.02rem;
        >div{
          position: relative;
          border-radius: 0.03rem;
          width: 100%;
          height:100%;
          background-image: url("../images/we_12.jpg");
          background-size: cover;
          overflow: hidden;
        }
      }
      >div:nth-child(2){
        overflow: hidden;
        >div:nth-child(1){
          float: left;
          width: 52%;
          height: 0.838rem;
          padding: 0.02rem;
          >div{
            position: relative;
            width: 100%;
            height:100%;
            background-image: url("../images/we_12.jpg");
            background-size: cover;
            border-radius: 0.03rem;
            overflow: hidden;
          }
        }
        >div:nth-child(2){
          float: left;
          width:48%;
          height: 1.135rem;
          padding: 0.02rem;
          >div{
            position: relative;
            width: 100%;
            height:100%;
            background-image: url("../images/we_14.jpg");
            background-size: cover;
            border-radius: 0.03rem;
            overflow: hidden;
          }
        }
      }
    }
    >.se2_right_wrap{
      float: right;
      width:46%;
      margin-top: 0.302rem;
      height: 1.093rem;
      padding: 0.02rem;
      >div{
        position: relative;
        width: 100%;
        height:100%;
        background-image: url("../images/we_16.jpg");
        background-size: cover;
        border-radius: 0.03rem;
        overflow: hidden;
      }
    }
  }
  @media screen and (max-width: 1020px){
    .se2_picture{
      float: none;
      width: 8.484rem;
      overflow: hidden;
      >.se2_left_wrap{
        float: left;
        width:54%;
        >div:nth-child(1){
          margin-left: 1.11rem;
          height: 1.9038rem;
          padding: 0.1rem;
          >div{
            border-radius: 0.1rem;
          }
        }
        >div:nth-child(2){
          overflow: hidden;
          >div:nth-child(1){
            float: left;
            width: 52%;
            height: 1.938rem;
            padding: 0.1rem;
            >div{
              border-radius: 0.1rem;
            }
          }
          >div:nth-child(2){
            float: left;
            width: 48%;
            height: 3.135rem;
            padding: 0.1rem;
            >div{
              border-radius: 0.1rem;
            }
          }
        }
      }
      >.se2_right_wrap{
        float: right;
        width: 46%;
        margin-top: 1.302rem;
        height: 2.293rem;
        padding: 0.1rem;
        >div{
          border-radius: 0.1rem;
        }
      }
    }
  }

  .se2_bg_mask{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.58);
    transition: opacity 0.7s;
    opacity: 0;
    cursor: pointer;
    &:hover{
      opacity: 1;
    }
    >div{
      position: absolute;
      left:50%;
      top:50%;
      height: 0.265rem;
      width: 100%;
      margin-left: -50%;
      margin-top: -0.1325rem;
      >p:nth-child(1){
        font-size: 0.114rem;
        text-align: center;
        color:#3293ca ;
        @include text-ellipsis-line();
      }
      >p:nth-child(2){
        margin-top: 0.052rem;
        font-size: 0.1rem;
        text-align: center;
        color:#3293ca ;
      }
    }

  }
  @media screen and(max-width: 768px){
    .se2_bg_mask{
      opacity: 1;
      background-color: transparent;
    }
  }
}
//第三屏

//第四屏
.section3{

  .se3_wrap{
    position: absolute;
    left: 65%;
    top:50%;
    width:560px;
    height: 386px;
    margin-left:-280px;
    margin-top: -189px;
  }
  @media screen and(max-width: 768px){
    .se3_wrap {
      position: static;
      width: 100%;
       margin-left:0;
       margin-top:0;
      padding-left: 0.3rem;
      padding-right: 0.3rem;
      height:auto;
    }
  }
  .se3_text_wrap{
        >p:nth-child(1){
          font-size: 40px;
          font-weight: 100;
          letter-spacing: 7px;
          color: #fff;
          margin-bottom: 33px;
        }
    >a{
      >p{
        font-size: 18px;
        font-weight: 100;
        letter-spacing: 1px;
        color: #fff;
        margin-bottom: 10px;
        >span:nth-child(2){
          color: #1e94d4;
          margin-left: 4px;
          position: relative;
          display: inline-block;
          top: 3px;
          width: 60px;
          height: 20px;
          overflow: hidden;
        }
      }
    }

        >p:nth-child(3){
          font-size: 18px;
          font-weight: 100;
          color: #fff;
          line-height: 31px;
          letter-spacing: 2px;
        }
      }
  @media screen and(max-width: 768px) {
    .se3_text_wrap{
      >p:nth-child(1){
        font-size: 0.61rem;
        font-weight: 100;
        letter-spacing: 7px;
        color: #fff;
        margin-bottom: 0.4rem;
      }
      >a{
        >p{
          font-weight: 100;
          letter-spacing: 1px;
          color: #fff;
          margin-bottom: 10px;
          >span:nth-child(2){
            color: #1e94d4;
            margin-left: 4px;
            position: relative;
            display: inline-block;
            top: 3px;
            width: 60px;
            height: 20px;
            overflow: hidden;
          }
        }
      }
      >p:nth-child(3){
        font-size: 0.26rem;
        font-weight: 100;
        color: #fff;
        line-height: 0.5rem;
        letter-spacing: 1px;
      }
    }
  }
  .se3_picture_wrap{
    margin-top: 40px;
    >ul{
      >li{
        float: left;
        width:80px;
        margin-left: 20px;
        margin-right: 20px;
        >a{
          >div{
            width: 60px;
            height:60px;
            margin: 0 auto;
            border-radius: 50%;
            >img{
              width: 100%;
              height:100%;
            }
          }
          >p{
            text-align: center;
            font-size: 16px;
            color: #fff;
            margin-top: 19px;
          }
        }

      }
      >li:first-child{
        margin-left: 0;
      }
      >li:last-child{
        margin-right: 0;
      }
    }
  }
  @media screen and(max-width: 768px){
    .se3_picture_wrap{
      margin-top: 0.55rem;
      >ul{
        >li{
          float: left;
          width: 20%;
           margin-left: 0;
           margin-right: 0;
          >a{
            >div{
              width: 1.1rem;
              height: 1.1rem;
              margin: 0 auto;
              border-radius: 50%;
            }
            >p{
              text-align: center;
              font-size: 0.3rem;
              font-weight: 100;
              color: #fff;
              margin-top: 19px;
            }
          }

        }
        >li:first-child{
          margin-left: 0;
        }
        >li:last-child{
          margin-right: 0;
        }
      }
    }
  }
}
// 第四屏

//第五屏
.section4{

 .se4_wrap{
   @include box(px-rem(1675),px-rem(446),0,px-rem(179));
 }
  @media screen and (max-width: 1020px){
    .se4_wrap{
      @include box(px-rem(1675,1.03),auto,0,px-rem(179,0.5));
    }
  }
  .se4_text_wrap{
    @include box-fl(px-rem(728),auto);
    >p:nth-child(1){
      margin-bottom: px-rem(31);
      font-size: px-rem(41);
      color: #fff;
    }
    >p:nth-child(2){
      margin-bottom: px-rem(20);
      font-size: px-rem(29);
      color: #fff;
    }
    >p:nth-child(3){
      font-size: px-rem(17);
      color: #fff;
      letter-spacing:px-rem(7) ;
      line-height: px-rem(32);
    }
  }
  @media screen and (max-width: 1020px){
    .se4_text_wrap{
      @include box(px-rem(728,2.37),auto);
      >p:nth-child(1){
        margin-bottom: px-rem(45,2.37);
        font-size: px-rem(41,2.37);
        color: #fff;
        text-align: center;
      }
      >p:nth-child(2){
       display: none;
      }
      >p:nth-child(3){
       display: none;
      }
    }
  }
  .se4_picture_wrap{
    @include box-fr(px-rem(890),auto);
    >.se4_left_wrap{
      @include box-fl(px-rem(273),auto);
      >div:nth-child(1){
        @include box-fl(auto,auto);
        >div:nth-child(1){
          @include box-fl(px-rem(126),px-rem(81),px-rem(132),0);
        }
        >div:nth-child(2){
          @include box-fr(px-rem(121),px-rem(166),px-rem(49),px-rem(25));
        }
      }
      >div:nth-child(2){
        @include box-fl(auto,auto,px-rem(27));
        padding-top:1px ;
        >div:nth-child(1){
          @include box-fl(px-rem(82),px-rem(68),0,px-rem(85));
        }
        >div:nth-child(2){
          @include box-fl(px-rem(75),px-rem(107),0,px-rem(30));
        }
      }
    }
    >.se4_center_left_wrap{
      @include box-fl(px-rem(160),auto,0,px-rem(24));
      >div:nth-child(1){
        @include box(auto,px-rem(125),px-rem(49));
      }
      >div:nth-child(2){
        @include box(auto,px-rem(122),px-rem(30));
      }
      >div:nth-child(3){
        @include box-fr(px-rem(92),px-rem(76),px-rem(22));
      }

    }
    >.se4_center_right_wrap{
      @include box-fl(px-rem(119),auto,0,px-rem(24));
      >div:nth-child(1){
        @include box(auto,px-rem(73),px-rem(24));
      }
      >div:nth-child(2){
        @include box(auto,px-rem(179),px-rem(24));
      }
      >div:nth-child(3){
        @include box(auto,px-rem(81),px-rem(23));
      }
    }
    >.se4_right_wrap{
      @include box-fl(auto,auto,0,px-rem(27));
        >div:nth-child(1){
          @include box(px-rem(86),px-rem(55),px-rem(17));
        }
      >div:nth-child(2){
        @include box(auto,auto,px-rem(22));
          >div:nth-child(1){
            @include box-fl(px-rem(116),px-rem(100));
          }
        >div:nth-child(2){
            @include box-fl(px-rem(118),px-rem(82),px-rem(19),px-rem(19));
          }
        }
      >div:nth-child(3){
        @include box(auto,auto,px-rem(22));
          >div:nth-child(1){
            @include box-fl(px-rem(88),px-rem(58));
          }
        >div:nth-child(2){
            @include box-fl(px-rem(89),px-rem(60),0,px-rem(20));
          }
        }
      >div:nth-child(4){
         @include box(px-rem(65),px-rem(83),px-rem(20));
      }
    }
  }
  @media screen and (max-width: 1020px){
    .se4_picture_wrap{
      @include box(px-rem(890,1.94),auto);
      >.se4_left_wrap{
        @include box-fl(px-rem(273,1.94),auto);
        >div:nth-child(1){
          @include box-fl(auto,auto);
          >div:nth-child(1){
            @include box-fl(px-rem(126,1.94),px-rem(81,1.94),px-rem(132,1.94),0);
          }
          >div:nth-child(2){
            @include box-fr(px-rem(121,1.94),px-rem(166,1.94),px-rem(49,1.94),px-rem(25,1.94));
          }
        }
        >div:nth-child(2){
          @include box-fl(auto,auto,px-rem(27,1.94));
          padding-top:1px ;
          >div:nth-child(1){
            @include box-fl(px-rem(82,1.94),px-rem(68,1.94),0,px-rem(85,1.94));
          }
          >div:nth-child(2){
            @include box-fl(px-rem(75,1.94),px-rem(107,1.94),0,px-rem(30,1.94));
          }
        }
      }
      >.se4_center_left_wrap{
        @include box-fl(px-rem(160,1.94),auto,0,px-rem(24,1.94));
        >div:nth-child(1){
          @include box(auto,px-rem(125,1.94),px-rem(49,1.94));
          background-color: #fff;
        }
        >div:nth-child(2){
          @include box(auto,px-rem(122,1.94),px-rem(30,1.94));
          background-color: #fff;
        }
        >div:nth-child(3){
          @include box-fr(px-rem(92,1.94),px-rem(76,1.94),px-rem(22,1.94));
          background-color: #fff;
        }

      }
      >.se4_center_right_wrap{
        @include box-fl(px-rem(119,1.94),auto,0,px-rem(24,1.94));
        >div:nth-child(1){
          @include box(auto,px-rem(73,1.94),px-rem(24,1.94));
          background-color: #fff;
        }
        >div:nth-child(2){
          @include box(auto,px-rem(179,1.94),px-rem(24,1.94));
          background-color: #fff;
        }
        >div:nth-child(3){
          @include box(auto,px-rem(81,1.94),px-rem(23,1.94));
          background-color: #fff;
        }
      }
      >.se4_right_wrap{
        @include box-fl(auto,auto,0,px-rem(27,1.94));
        >div:nth-child(1){
          @include box(px-rem(86,1.94),px-rem(55,1.94),px-rem(17));
          background-color: #fff;
        }
        >div:nth-child(2){
          @include box(auto,auto,px-rem(22,1.94));
          >div:nth-child(1){
            @include box-fl(px-rem(116,1.94),px-rem(100,1.94));
            background-color: #fff;
          }
          >div:nth-child(2){
            @include box-fl(px-rem(118,1.94),px-rem(82,1.94),px-rem(19,1.94),px-rem(19,1.94));
            background-color: #fff;
          }
        }
        >div:nth-child(3){
          @include box(auto,auto,px-rem(22,1.94));
          >div:nth-child(1){
            @include box-fl(px-rem(88,1.94),px-rem(58,1.94));
            background-color: #fff;
          }
          >div:nth-child(2){
            @include box-fl(px-rem(89,1.94),px-rem(60,1.94),0,px-rem(20,1.94));
            background-color: #fff;
          }
        }
        >div:nth-child(4){
          @include box(px-rem(65,1.94),px-rem(83,1.94),px-rem(20,1.94));
          background-color: #fff;
        }
      }
    }
  }
  .se4_img{
    border-radius: 2px;
    transition:transform 0.5s;
    background-size: cover;
    &:hover{
      transform: scale(1.1,1.1);
    }
  }
}
//第五屏

.footer{

   .se5_text_wrap{
     position: absolute;
     left: 69%;
     top:45%;
     width:500px ;
     height:175px ;
     margin-left: -230px;
     margin-top: -89px;
     >p:nth-child(1){
       font-size: 45px;
       color: #fff;
       letter-spacing:18px;
       font-weight: 100;
       margin-bottom: 35px;
     }
     >a{
       >p{
         font-size: 22px;
         color: #fff;
         font-weight: 100;
         margin-bottom: 35px;
         letter-spacing: 2px;
         >span{
           color: #1e94d4;
         }
         >span:nth-child(3){
           position: relative;
           width: 60px;
           display: inline-block;
           overflow: hidden;
           color: #1e94d4;
           height: 20px;
           vertical-align: top;
         }
       }
     }

     >p:nth-child(3){
       font-size:16px;
       color: #fff;
       font-weight: 100;
       letter-spacing: 2px;
     }
     >p:nth-child(4){
       margin-top: 8px;
       font-size:16px;
       color: #fff;
       font-weight: 100;
       letter-spacing: 2px;
     }
   }
  @media screen and(max-width:768px){
    .se5_text_wrap{
      position: absolute;
      left: 6%;
      top:50%;
      width:88%;
      height:175px ;
      margin-left:0;
      >p:nth-child(1){
        font-size: 0.78rem;
        color: #fff;
        letter-spacing: 0.3rem;
        font-weight: 100;
        margin-bottom: 0.4rem;
      }
    >a{
      >p{
        font-size: 0.3rem;
        line-height: 0.3rem;
        color: #fff;
        font-weight: 100;
        margin-bottom: 0.6rem;
        letter-spacing: 2px;
        >span{
          color: #1e94d4;
        }
      }
    }

      >p:nth-child(3){
        font-size: 0.3rem;
        color: #fff;
        font-weight: 100;
        letter-spacing: 0.07rem;
        line-height: 0.6rem;
      }
      >p:nth-child(4){
        font-size: 0.3rem;
        color: #fff;
        font-weight: 100;
        letter-spacing: 0.07rem;
        line-height: 0.6rem;
      }
    }
  }
  .bottom_content{
    position: absolute;
    left:0;
    bottom:0;
    height: 140px;
    width: 100%;
    background-color: #272624;
    @media screen and(max-width:768px){
      height: 35px;
    }
  }
  .bottom_wrap{
    position: absolute;
    left: 15%;
    bottom:0;
    height: 140px;
    width: 70%;
    >.lianxi_wrap{
      float: left;
      margin-top:6px;
      >p{
        font-size: 12px;
        line-height: 22px;
        height:22px;
        letter-spacing: 2px;
        color: #fff;
      }
      >p:nth-child(1){
        font-size: 21px;
        font-weight: bold;
        vertical-align: middle;
        height: auto;
        margin-bottom: 10px;
       >span{
         width:40px;
         height: 40px;
         float: left;
       }
        >b{
          float: left;
          font-weight: bold;
          margin-top: 8px;
          margin-left: 4px;
        }
      }
      @media screen and(max-width: 768px) {
        display: none;
      }
    }
    >.erweima_wrap{
      float: right;
      >div{
        width: 140px;
        margin-left: 20px;
       float: right;
        margin-top: -75px;
        >div{
          width: 130px;
          height: 130px;
          margin: 0 auto;
          padding: 4px;
          background-color: #fff;
          >img{
            width: 100%;
            height:100%;
          }
        }
        >p{
          text-align: center;
          color: #fff;
          margin-top: 6px;
        }
        >p:nth-child(2){
          font-size: 14px;
        }
      }
      @media screen and(max-width: 1020px) {
        display: none;
      }
    }
    >.zizhi_wrap{
      position: absolute;
      bottom:0;
      height: 34px;
      font-size: 12px;
      width: 100%;
      color: #939592;
      text-align: center;
      padding-top: 10px;
      border-top: 1px solid #3e3e3c;
    }
  }
}
#fp-nav{
  @include media(xs){
    display: none;
  }
}
#fp-nav ul li a span, .fp-slidesNav ul li a span {
  background: #fff;
}
@-webkit-keyframes b_i1 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes b_i2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes b_i3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes b_i1 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes b_i2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes b_i3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes b_i1 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes b_i2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes b_i3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes b_i1 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes b_i2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes b_i3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes sP1 {
  0% {
    opacity: 1;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-moz-keyframes sP1 {
  0% {
    opacity: 1;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-ms-keyframes sP1 {
  0% {
    opacity: 1;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@keyframes sP1 {
  0% {
    opacity: 1;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-webkit-keyframes sP2 {
  0% {
    opacity: 1;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0.5;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-moz-keyframes sP2 {
  0% {
    opacity: 1;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0.5;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-ms-keyframes sP2 {
  0% {
    opacity: 1;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0.5;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@keyframes sP2 {
  0% {
    opacity: 1;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0.5;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-webkit-keyframes sP3 {
  0% {
    opacity: 1;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0.5;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0.2;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-moz-keyframes sP3 {
  0% {
    opacity: 1;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0.5;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0.2;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-ms-keyframes sP3 {
  0% {
    opacity: 1;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0.5;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0.2;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@keyframes sP3 {
  0% {
    opacity: 1;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0.5;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0.2;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-webkit-keyframes sP4 {
  0% {
    opacity: 0.5;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0.2;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-moz-keyframes sP4 {
  0% {
    opacity: 0.5;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0.2;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-ms-keyframes sP4 {
  0% {
    opacity: 0.5;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0.2;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@keyframes sP4 {
  0% {
    opacity: 0.5;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0.2;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-webkit-keyframes sP5 {
  0% {
    opacity: 0.2;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-moz-keyframes sP5 {
  0% {
    opacity: 0.2;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-ms-keyframes sP5 {
  0% {
    opacity: 0.2;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@keyframes sP5 {
  0% {
    opacity: 0.2;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-webkit-keyframes sP6 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-moz-keyframes sP6 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@-ms-keyframes sP6 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}

@keyframes sP6 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
  }
}
.jiantou{
  font-style: normal;
  font-size: 20px;
  text-align: center;
  position: absolute;
}
.i1 {
  left: -45px;
  opacity: 1;
  -webkit-animation: sP1 1s linear infinite;
  -moz-animation: sP1 1s linear infinite;
  -ms-animation: sP1 1s linear infinite;
  animation: sP1 1s linear infinite;
}

.i2 {
  left: -30px;
  opacity: 1;
  -webkit-animation: sP2 1s linear infinite;
  -moz-animation: sP2 1s linear infinite;
  -ms-animation: sP2 1s linear infinite;
  animation: sP2 1s linear infinite;
}

.i3 {
  left: -15px;
  opacity: 1;
  -webkit-animation: sP3 1s linear infinite;
  -moz-animation: sP3 1s linear infinite;
  -ms-animation: sP3 1s linear infinite;
  animation: sP3 1s linear infinite;
}

.i4 {
  left: 0;
  opacity: 1;
  -webkit-animation: sP4 1s linear infinite;
  -moz-animation: sP4 1s linear infinite;
  -ms-animation: sP4 1s linear infinite;
  animation: sP4 1s linear infinite;
}

.i5 {
  left: 15px;
  opacity: 0.5;
  -webkit-animation: sP5 1s linear infinite;
  -moz-animation: sP5 1s linear infinite;
  -ms-animation: sP5 1s linear infinite;
  animation: sP5 1s linear infinite;
}

.i6 {
  left: 30px;
  opacity: 0.2;
  -webkit-animation: sP6 1s linear infinite;
  -moz-animation: sP6 1s linear infinite;
  -ms-animation: sP6 1s linear infinite;
  animation: sP6 1s linear infinite;
}